---
{
	"title": "Data Picture",
	"language": "en",
	"category": "Plugins",
	"description": "Event driven port of Picturefill",
	"tag": "data-picture",
	"parentdir": "data-picture",
	"altLangPrefix": "data-picture",
	"dateModified": "2025-05-20"
}
---

<section>
	<h2>Purpose</h2>
	<p>Event driven port of <a href="https://github.com/scottjehl/picturefill">Picturefill</a>.</p>
</section>

<section>
	<h2>Features</h2>
	<section>
		<h3>Browser Width</h3>
		<p>This example uses <a href="https://www.w3.org/TR/css3-mediaqueries/#width">min-width</a> to determine which image should be displayed. Resize the browser window to see the different images load.</p>

		<figure>
			<span data-pic="data-pic" data-alt="Parliament Hill" data-class="img-responsive">
				<!-- Default image: <div [data-src]> with no data-media attribute is displayed when:
					1. None of the other <div [data-src]> media queries match.
					2. The browser doesn't support media queries -->
				<span data-src="demo/img/parliament-hill-large.jpg"></span>

				<!-- Images for browsers with CSS media query support -->
				<span data-src="demo/img/parliament-hill-small.jpg" data-media="(min-width: 0px)"></span>
				<span data-src="demo/img/parliament-hill-medium.jpg" data-media="(min-width: 768px)"></span>
				<span data-src="demo/img/parliament-hill-large.jpg" data-media="(min-width: 992px)"></span>
				<span data-src="demo/img/parliament-hill-extralarge.jpg" data-media="(min-width: 1200px)"></span>

				<!-- Fallback content for non-JS browsers -->
				<noscript><img src="demo/img/parliament-hill-large.jpg" alt="Parliament Hill"></noscript>
			</span>
			<figcaption>
				<p>Photo by <a href="https://www.flickr.com/photos/intercultura/6130311384">Noema Pérez</a>, licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/deed.en_CA">Creative Commons</a>.</p>
			</figcaption>
		</figure>

		<details class="wb-prettify all-pre linenums">
			<summary>View code</summary>
			<pre><code>&lt;figure&gt;
	&lt;span data-pic="data-pic" data-alt="Parliament Hill" data-class="img-responsive"&gt;
		&lt;!-- Default image: &lt;div [data-src]&gt; with no data-media attribute is displayed when:
				1. None of the other &lt;div [data-src]&gt; media queries match.
				2. The browser doesn't support media queries --&gt;
		&lt;span data-src="demo/img/parliament-hill-large.jpg"&gt;&lt;/span&gt;

		&lt;!-- Images for browsers with CSS media query support --&gt;
		&lt;span data-src="demo/img/parliament-hill-small.jpg" data-media="(min-width: 0px)"&gt;&lt;/span&gt;
		&lt;span data-src="demo/img/parliament-hill-medium.jpg" data-media="(min-width: 500px)"&gt;&lt;/span&gt;
		&lt;span data-src="demo/img/parliament-hill-large.jpg" data-media="(min-width: 960px)"&gt;&lt;/span&gt;
		&lt;span data-src="demo/img/parliament-hill-extralarge.jpg" data-media="(min-width: 1200px)"&gt;&lt;/span&gt;

		&lt;!-- Fallback content for non-JS browsers. --&gt;
		&lt;noscript&gt;&lt;img src="demo/img/parliament-hill-large.jpg" alt="Parliament Hill"/&gt;&lt;/noscript&gt;
	&lt;/span&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Photo by &lt;a href="https://www.flickr.com/photos/intercultura/6130311384"&gt;Noema Pérez&lt;/a&gt;, licensed under &lt;a href="https://creativecommons.org/licenses/by-nc-sa/2.0/deed.en_CA"&gt;Creative Commons&lt;/a&gt;.&lt;/p&gt;
	&lt;/figcaption&gt;</code></pre>
		</details>
	</section>

	<section>
		<h3>High Pixel Density</h3>
		<p>This example uses <a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="Read about high resolution media queries">two media queries</a> to serve high resolution images to devices that will benefit from them (i.e. Retina displays).</p>

		<figure>
			<span data-pic="data-pic" data-alt="False Kiva in the Canyonlands" data-class="img-responsive">
				<!-- Images for different device resolutions -->
				<span data-src="demo/img/cave-low-res.jpg"></span>
				<span data-src="demo/img/cave-high-res.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)"></span>

				<!-- Fallback content for non-JS browsers -->
				<noscript><img src="demo/img/cave-low-res.jpg" alt="False Kiva in the Canyonlands"></noscript>
			</span>
			<figcaption>
				<p>Photo by <a href="https://www.flickr.com/photos/snowpeak/7351510924/">snowpeak</a>, licensed under <a href="https://creativecommons.org/licenses/by/2.0/">Creative Commons</a>.</p>
			</figcaption>
		</figure>

		<details>
			<summary>View code</summary>
			<pre><code>&lt;figure&gt;
	&lt;span data-pic="data-pic" data-alt="False Kiva in the Canyonlands" data-class="img-responsive"&gt;
		&lt;!-- Images for different device resolutions --&gt;
		&lt;span data-src="demo/img/cave-low-res.jpg"&gt;&lt;/span&gt;
		&lt;span data-src="demo/img/cave-high-res.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)"&gt;&lt;/span&gt;

		&lt;!-- Fallback content for non-JS browsers --&gt;
		&lt;noscript&gt;&lt;img src="demo/img/cave-low-res.jpg" alt="False Kiva in the Canyonlands"/&gt;&lt;/noscript&gt;
	&lt;/span&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Photo by &lt;a href="https://www.flickr.com/photos/snowpeak/7351510924/"&gt;snowpeak&lt;/a&gt;, licensed under &lt;a href="https://creativecommons.org/licenses/by/2.0/"&gt;Creative Commons&lt;/a&gt;.&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
		</details>
	</section>
</section>
